<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialogVisible"
      :show-close="false"
      width="1000px"
    >
      <manage-info :row="row" />
      <depature-info :row="row" />
      <div>
        <el-row
          type="flex"
          justify="space-between"
          style="margin-top: 25px"
        >
          <el-col class="car-manage-title">收车问题</el-col>
        </el-row>
        <el-form
          ref="carManageDialog"
          :model="row"
          label-width="100px"
        >
          <el-row style="margin-top: 15px">
            <el-col :span="8">
              <el-form-item label="原发车里程:" prop="mileage">
                <div>{{ row.mileage ? row.mileage : '-' }}</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="现收车里程:" prop="carMileage">
                <el-input
                  v-model="row.carMileage"
                  size="medium"
                  placeholder="请输入现收车里程"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="车况图片:" prop="img4">
                <upload-car-state
                  :folder="carStatefolder"
                  :row="row"
                  :img="row.img4"
                  @upload-success="handleUploadState"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车况图片:" prop="img5">
                <upload-car-state
                  :folder="carStatefolder"
                  :row="row"
                  :img="row.img5"
                  @upload-success="handleUploadStatus"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="车况图片:" prop="img6">
                <upload-car-state
                  :folder="carStatefolder"
                  :row="row"
                  :img="row.img6"
                  @upload-success="handleUploadCondition"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="备注信息:" prop="des4">
                <el-input
                  v-model="row.des4"
                  size="medium"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注信息:" prop="des5">
                <el-input
                  v-model="row.des5"
                  size="medium"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注信息:" prop="des6">
                <el-input
                  v-model="row.des6"
                  size="medium"
                  placeholder="请输入备注"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer">
        <el-button
          @click="handleCancel"
        >
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleCarManage"
        >
          确 定 收 车
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >
          收 车 故 障
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ManageInfo from '@/components/ManageInfo'
import DepatureInfo from '@/components/DepatureInfo'
import UploadCarState from '@/components/UploadCarState'
export default {
  name: 'CarManageDialog',
  components: {
    ManageInfo,
    DepatureInfo,
    UploadCarState
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      carStatefolder: 'carManageState'
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel-dialog')
      this.$refs.carManageDialog.resetFields()
    },
    handleConfirm() {
      this.$refs.carManageDialog.validate((valid) => {
        if (valid) {
          this.$emit('confirm-dialog', {
            id: this.row.id,
            carMileage: this.row.carMileage,
            img4: this.row.img4,
            img5: this.row.img5,
            img6: this.row.img6,
            des4: this.row.des4,
            des5: this.row.des5,
            des6: this.row.des6
          })
        } else {
          return false
        }
      })
    },
    handleCarManage() {
      this.$refs.carManageDialog.validate((valid) => {
        if (valid) {
          this.$emit('car-manage-dialog', {
            id: this.row.id,
            carMileage: this.row.carMileage,
            img4: this.row.img4,
            img5: this.row.img5,
            img6: this.row.img6,
            des4: this.row.des4,
            des5: this.row.des5,
            des6: this.row.des6
          })
        } else {
          return false
        }
      })
    },
    handleUploadState(url) {
      this.row.img4 = url
    },
    handleUploadStatus(url) {
      this.row.img5 = url
    },
    handleUploadCondition(url) {
      this.row.img6 = url
    }
  }
}
</script>

<style scoped>
  .car-manage-title {
    border-bottom: 1px solid #ddd;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
  }
</style>
